<template>
    <div id="historical-details" ref="historical-details">
        <p class="title">历史明细</p>
            <div class="mainconteler ml10">
                <template>
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="群推" name="first">
                            <el-row :gutter="24">
                                <el-col :span="22">
                                    <range-date-picker class="timewidth210 height40" ref="toolBar" :defaultDate="dates" @date-change="getDate"></range-date-picker>
                                    <span style="margin-left:15px">消息类型</span>
                                    <template>
                                        <el-select v-model="information" @change='infotype' size="small" placeholder="请选择">
                                            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </template>
                                    <span>创建方式</span>
                                    <template>
                                        <el-select v-model="tasksource" @change="assignment" size="small" placeholder="请选择">
                                            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </template>
                                    <span class="winput">
                                    <el-input placeholder="请输入内容" size="small"  suffix-icon="el-icon-search" v-model="searchbar" @change="inputsearch">
                                    </el-input>
                                    </span>
                                </el-col>
                                <el-col :span="2">
                                    <el-button type="primary" size="mini" class="topbutton" @click="conditionquery">查询</el-button>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                        <el-tab-pane label="单推" name="second">
                            <el-row :gutter="24">
                                <el-col :span="22">
                                    <range-date-picker class="timewidth210 height40" ref="toolBar" :defaultDate="dates" @date-change="getDate"></range-date-picker>
                                    <span style="margin-left:15px">消息类型</span>
                                    <template>
                                        <el-select v-model="information" @change="infotype" size="small" placeholder="请选择">
                                            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </template>
                                    <span>创建方式</span>
                                    <template>
                                        <el-select v-model="tasksource" @change="assignment" size="small" placeholder="请选择">
                                            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </template>
                                    <span class="winput">
                                    <el-input placeholder="请输入内容" size="small"  suffix-icon="el-icon-search" v-model="searchbar" @change="inputsearch">
                                    </el-input>
                                  </span>
                                </el-col>
                                <el-col :span="2">
                                    <el-button type="primary" size="mini" class="topbutton" @click="conditionquery">查询</el-button>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                    </el-tabs>
                </template>
                <el-main class="main-table-box">
                    <!-- 表格 -->
                    <el-table ref="table" :data="tableData" @filter-change="handleFilterChange" tooltip-effect="dark" style="width: 100%">
                        <el-table-column prop="SendTime" label="推送时间" width="180">
                        </el-table-column>
                        <el-table-column prop="Title" label="通知标题" width="auto" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="Content" label="通知类容" width="auto" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="Type" label="推送目标" width="auto" column-key="Type" v-if="showgoal" :formatter="translateType" :filters="[{text: '全推+号码包推+标签推', value: 'all'}, {text: '全推', value: 'app'}, {text: '号码包推', value: 'pack'}, {text: '标签推', value: 'tag'}]" :filter-multiple="false">
                        </el-table-column>
                        <el-table-column prop="endpointType" label="任务类型" width="auto" column-key="endpointType" v-if="showtask" :formatter="translateTask" :filters="[{text: 'token单推', value: 'token'}, {text: '账号单推', value: 'account'}, {text: '全部', value: 'all'}]" :filter-multiple="false">
                        </el-table-column>
                        <el-table-column prop="status" label="推送状态" width="auto">
                        <template slot-scope="scope">
                            {{devTypesDict[scope.row.status]}}
                        </template>
                        </el-table-column>
                        <el-table-column label="推送数据" width="auto">
                            <template slot-scope="scope">
                                <el-popover trigger="hover" placement="top" popper-class="pushbackgd">
                                <p>应发: {{ scope.row.push_active }}</p>
                                <p>实发: {{ scope.row.push_online }}</p>
                                <p>展示: {{ scope.row.verify }}</p>
                                <p>点击: {{ scope.row.click }}</p>
                                <p v-if="showqc">清除: {{ scope.row.cleanup }}</p>
                                <div slot="reference" class="name-wrapper" v-if="showqc">
                                    <el-tag size="medium"> {{scope.row.push_active + '|' + scope.row.push_online + '|' + scope.row.verify + '|' + scope.row.click + '|' + scope.row.cleanup}}</el-tag>
                                </div>
                                <div slot="reference" class="name-wrapper" v-else>
                                    <el-tag size="medium"> {{scope.row.push_active + '|' + scope.row.push_online + '|' + scope.row.verify + '|' + scope.row.click}}</el-tag>
                                </div>
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="auto">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="seeDetails(scope.row)">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <el-pagination @current-change="handleCurrentChange" v-loading="tableLoading" :current-page="currentPage" :page-size="pagesize" layout="total, prev, pager, next" :total="totalCount" style="padding:20px 5px">
                    </el-pagination>
                </el-main>
            </div>
    </div>
</template>
<script type="text/ecmascript-6">
import api from '../../../../api/url'
import ajax from '../../../../api/ajax/mobilePushAjax'
import { RangeDatePicker } from '../../components'
import { mapGetters, mapMutations } from 'vuex'
import { getDateTime, getNowFormatDate, nextPage } from '../../../../assets/js/index'
import { gatefay } from '../../comm/js/dict'
let Base64 = require('js-base64').Base64
export default {
    name: 'historical-details',
    components: {
        RangeDatePicker
    },
    data () {
        return {
            tableLoading: true, // 加载过程
            changeval: '', // 下拉选中的值
            showtask: false,
            showgoal: false,
            hurl: '',
            tableData: [],
            activeName: 'first',
            SendTime: '',
            Title: '',
            Content: '',
            showqc: '', // 显示清除
            push_active: '',
            push_online: '',
            verify: '',
            click: '',
            cleanup: '',
            status: '全部',
            Type: '',
            dates: [], // 时间
            currentPage: 1, // 当前页码
            pagesize: 40, // 默认每页数据量
            totalCount: 0, // 默认数据总数
            start_date: '',
            end_date: '',
            information: '通知栏消息',
            tasksource: '全部',
            goalt: '',
            searchbar: '',
            options1: [{
                    value: 'notify',
                    label: '通知栏消息'
                },
                {
                    value: 'message',
                    label: '透传消息/静默消息'
                }
            ],
            options2: [{
                    value: 'web',
                    label: 'web管理台推送'
                },
                {
                    value: 'api',
                    label: 'rest api推送'
                },
                {
                    value: 'all',
                    label: '全部'
                }
            ]
        }
    },
    computed: {
        ...mapGetters(['v3AppKey', 'v3SecretKey', 'v3AppId', 'v3platform']),
        devTypesDict () {
      return gatefay.statusType
    }
    },
    methods: {
        ...mapMutations(['v3_resresultList', 'v3_performpushId']),
        getDate (list) {
            if (list) {
                this.start_date = getDateTime(list[0], 'day')
                this.end_date = getDateTime(list[1], 'day')
            } else {
                this.start_date = ''
                this.end_date = ''
            }
        },
        // 日期格式化过去30天
        dateformat () {
            const start = new Date()
            const end = new Date()
            const begin = start.setTime(start.getTime())
            const finish = end.setTime(end.getTime() - 3600 * 1000 * 24 * 30)
            this.start_date = getNowFormatDate(finish)
            this.end_date = getNowFormatDate(begin)
            this.dates = [this.start_date, this.end_date]
        },
        infotype (val) {
            this.information = val
        },
        assignment (val) {
            this.tasksource = val
        },
        inputsearch (val) {
            this.searchbar = val
        },
        // 推送目标码
        translateType (row, column) {
            if (row.Type === 1) {
                return 'token单推'
            } else if (row.Type === 2) {
                return '账号单推'
            } else if (row.Type === 3) {
                return '全推'
            } else if (row.Type === 4) {
                return '标签推'
            } else {
                return '号码包推'
            }
        },
        // 推送任务码
        translateTask (row, column) {
            if (row.endpointType === '1') {
                return 'token单推'
            } else if (row.endpointType === '2') {
                return '账号单推'
            } else {
                return ''
            }
        },
        // 页码触发
        handleCurrentChange (val) {
            this.currentPage = val
            this.getcreatedData()
        },
        // 第一次进来的查询
        getcreatedData () {
            this.v3_resresultList('flag') // 存取漏斗标识
            this.showtask = false
            this.showgoal = true
            this.hurl = api.GET_PUSH_STATUS_APP
            let Basecode = Base64.encode(this.v3AppKey + ':' + this.v3SecretKey)
            let hItem = {
                Authorization: 'Basic' + ' ' + Basecode,
                 'Content-Type': 'application/json'
            }
            let params = {
                query_type: 1,
                operation: 1,
                source: 'all',
                start_date: this.dates[0],
                end_date: this.dates[1],
                start: ((this.currentPage - 1) * 40),
                length: 40
            }
            ajax.post(api.GET_PUSH_STATUS_APP, JSON.stringify(params), hItem).then(res => {
                this.tableLoading = false
                this.tableData = []
                this.tableData = res.result.list
                this.totalCount = parseInt(res.result.Total)
            })
        },
        // 表格下拉触发查询
        getfilterChange (val, url) {
            val = this.changeval
            url = this.hurl
            let Basecode = Base64.encode(this.v3AppKey + ':' + this.v3SecretKey)
            let hItem = {
                Authorization: 'Basic' + ' ' + Basecode,
                'Content-Type': 'application/json'
            }
            let parsearch = {
                app_id: this.v3AppId,
                start_date: this.start_date,
                end_date: this.end_date,
                query_type: 0,
                operation: 1,
                source: this.tasksource === '全部' ? 'all' : this.tasksource,
                status: this.status === '全部' ? 0 : this.status,
                message_type: this.information === '通知栏消息' ? 'notify' : this.information,
                message: this.searchbar,
                audience_type: val,
                start: ((this.currentPage - 1) * 40),
                length: 40
            }
            ajax.post(url, JSON.stringify(parsearch), hItem).then(res => {
                this.tableLoading = false
                this.tableData = []
                this.tableData = res.result.list
                this.totalCount = parseInt(res.result.Total)
            })
        },
        // 群推单推切换触发
        handleClick (val, url) {
            this.searchbar = ''
            if (this.activeName === 'first') {
                this.hurl = api.GET_PUSH_STATUS_APP // 切换时变换接口地址
                this.getcreatedData()
            } else {
                this.v3_resresultList('flad')
                this.goalt = 'all'
                val = this.goalt
                this.showtask = true
                this.showgoal = false
                this.hurl = api.GET_PUSH_STATUS_SINGLE // 切换时变换接口地址
                url = this.hurl
                let Baseencode = Base64.encode(this.v3AppKey + ':' + this.v3SecretKey)
                let itData = {
                    Authorization: 'Basic' + ' ' + Baseencode,
                    'Content-Type': 'application/json'
                }
                let parMies = {
                    app_id: this.v3AppId,
                    start_date: this.start_date,
                    end_date: this.end_date,
                    query_type: 1,
                    operation: 1,
                    source: this.tasksource === '全部' ? 'all' : this.tasksource,
                    status: this.status === '全部' ? 0 : this.status,
                    message_type: this.information === '通知栏消息' ? 'notify' : this.information,
                    message: this.searchbar,
                    audience_type: val,
                    length: 100
                }
                ajax.post(url, JSON.stringify(parMies), itData).then(res => {
                    this.tableLoading = false
                    this.tableData = []
                    this.tableData = res.result.list
                    this.totalCount = parseInt(res.result.Total)
                })
            }
        },
        // 推送目标下拉改变触发
        handleFilterChange (filters) {
            if (this.activeName === 'first') {
                if (filters.Type[0] === 'all') {
                    this.changeval = 'all'
                    this.getfilterChange()
                } else if (filters.Type[0] === 'app') {
                    this.changeval = 'app'
                    this.getfilterChange()
                } else if (filters.Type[0] === 'pack') {
                    this.changeval = 'pack'
                    this.getfilterChange()
                } else {
                    this.changeval = 'tag'
                    this.getfilterChange()
                }
            } else {
                if (filters.Type[0] === 'account') {
                    this.changeval = 'account'
                    this.getfilterChange()
                } else if (filters.Type[0] === 'token') {
                    this.changeval = 'token'
                    this.getfilterChange()
                } else {
                    this.changeval = 'all'
                    this.getfilterChange()
                }
            }
        },
        // 查询
        conditionquery () {
            let Baseencode = Base64.encode(this.v3AppKey + ':' + this.v3SecretKey)
            let itData = {
                Authorization: 'Basic' + ' ' + Baseencode,
                'Content-Type': 'application/json'
            }
            let parsearch = {
                app_id: this.v3AppId,
                start_date: this.start_date,
                end_date: this.end_date,
                query_type: 0,
                operation: 1,
                source: this.tasksource === '全部' ? 'all' : this.tasksource,
                status: this.status === '全部' ? 0 : this.status,
                message_type: this.information === '通知栏消息' ? 'notify' : this.information,
                message: this.searchbar,
                audience_type: 'all',
                length: 100
            }
            if (this.activeName === 'first') {
                ajax.post(api.GET_PUSH_STATUS_APP, parsearch, itData).then(res => {
                    this.tableLoading = false
                    this.tableData = []
                    this.tableData = res.result.list
                    this.totalCount = parseInt(res.result.Total)
                })
            } else {
                ajax.post(api.GET_PUSH_STATUS_SINGLE, parsearch, itData).then(res => {
                    this.tableLoading = false
                    this.tableData = []
                    this.tableData = res.result.list
                    this.totalCount = parseInt(res.result.Total)
                })
            }
        },
        // 查看
        seeDetails (row) {
            this.v3_performpushId(row.push_id)
           if (this.v3platform === 'android') {
             nextPage('/home/examineParticulars')
           } else {
             nextPage('/home/historicalQuery')
           }
        }
    },
    created () {
        this.dateformat()
        this.getcreatedData()
        if (this.v3platform === 'ios') {
            this.showqc = false
        } else {
             this.showqc = true
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
#historical-details
  height: 100%
  width: 100%
  .title
    font-size: 18px
    height: 60px
    line-height: 60px
    background #fff
    padding-left 15px
    margin-bottom: 10px
  .mainconteler
    height: 100%
    width: 100%
    padding: 0px 20px
    background-color: #ffff
    height calc(100% - 70px)
    overflow: auto
    overflow-x hidden
  .el-tabs__nav-wrap::after
    background-color: #ffffff !important
  .el-range-editor--mini.el-input__inner
    height: 40px;
  .el-range-editor--mini .el-range-separator
    line-height: 30px
  .winput
    display: inline-block
    width: 180px
  .topbutton
    padding: 10px 10px
.pushbackgd
  background-color #2a3139 !important
.pushbackgd>p
  font-size 14px
  color #fff
.el-table-filter__list>li:first-child
  display none
</style>
